﻿@model Models.DataModel.Contribution

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
    List<Models.DataModel.Port> lport = ViewBag.ListPort1;
    List<Models.DataModel.Company> lcom = ViewBag.ListCompany1;
    
    var lstPort = new Dictionary<string, string>();
    foreach(Models.DataModel.Port p in lport){
        lstPort.Add(p.PortId.ToString(), p.PortNumber);
    }

    var lstCompany = new Dictionary<string, string>();
    foreach (Models.DataModel.Company c in lcom)
    {
        lstCompany.Add(c.CompanyId.ToString(), c.CompanyNumber);
    }    
}

<h2>Create</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Contribution</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
        <div class="form-group">
            @Html.Label("Company", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownListFor(model => model.CompanyId, ViewBag.ListCompany as SelectList, new { @style = "width: 150px; height:23px;" })
                    @Html.ValidationMessageFor(model => model.CompanyId)
                    @Html.Label(" ", new { @id = "CompanyNumber" })
                    @Html.TextBoxFor(model => model.CompanyNumber, new { style = "display: none;" })
                    @Html.TextBoxFor(model => model.CompanyName, new { style = "display: none;" })
                </div>
        </div>
        <div class="form-group">
            @Html.Label("Port", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.PortId, ViewBag.ListPort as SelectList, new { @style = "width: 150px; height:23px;" })
                @Html.Label(" ", new { @id = "PortNumber" })
                @Html.TextBoxFor(model => model.PortNumber, new { style = "display: none;" })
                @Html.TextBoxFor(model => model.PortName, new { style = "display: none;" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.LocalNumber, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LocalNumber)
                @Html.ValidationMessageFor(model => model.LocalNumber)
                <em class="error" id="erLocalNumber" style="display:none; color:red;">Length of characters must be <=5</em>

            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.HourType, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.HourType)
                @Html.ValidationMessageFor(model => model.HourType)
                <em class="error" id="erHourType" style="display:none; color:red;">Please input HourType</em>
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.LaborType, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LaborType)
                @Html.ValidationMessageFor(model => model.LaborType)
            </div>
        </div>
            <div class="form-group">
                @Html.LabelFor(model => model.DateOfContribution, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextBoxFor(model => model.DateOfContribution)
                    @Html.ValidationMessageFor(model => model.DateOfContribution)
                    <em class="error" id="erDateOfContribution" style="display:none; color:red;">Please input DateOfContribution</em>
                </div>
            </div>
        <div class="form-group">
            @Html.LabelFor(model => model.NumberOfHours, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.NumberOfHours)
                @Html.ValidationMessageFor(model => model.NumberOfHours)
                <em class="error" id="erNumberOfHours" style="display:none; color:red;">Please input NumberOfHours</em>

            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.TransactionCode, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.TransactionCode)
                @Html.ValidationMessageFor(model => model.TransactionCode)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Comment, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Comment)
                @Html.ValidationMessageFor(model => model.Comment)
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input id="BtnSave"  type="submit" value="Create" class="btn btn-primary" />
            </div>
        </div>
    </div>
 </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
<script>
    $(document).ready(function () {
        $("#PortNumber").val('@lstPort.First().Value');
        $("#PortNumber").text('portnumber: '+'@lstPort.First().Value');

        $("#CompanyNumber").val('@lstCompany.First().Value');
        $("#CompanyNumber").text('companynumber: '+'@lstCompany.First().Value');

        $("#CompanyId").val('@lstCompany.First().Value');
        $("#PortId").val('@lstPort.First().Value');
    });
    $(function () {
        $("#DateOfContribution").datepicker();
    });

    $(function () {
        $("#PortId").on("change", function () {
            // You're referring to the object itself, so you can use $(this).
            var lst= @Html.Raw(Json.Encode(lstPort));
            $("#PortNumber").val(lst[this.value]);
            $("#PortNumber").text('portnumber: '+lst[this.value]);
        });
    });
    $(function () {
        $("#CompanyId").on("change", function () {
            // You're referring to the object itself, so you can use $(this).
            var lcm= @Html.Raw(Json.Encode(lstCompany));
            $("#CompanyNumber").val(lcm[this.value]);
            $("#CompanyNumber").text('companynumber: '+lcm[this.value]);
        });
    });
    ///check validation
    $('#BtnSave').click(function () {
        var tmp = $("#LocalNumber").val().trim();
        if (tmp.length >5) {
            $("#erLocalNumber").css("display", "block");
            return false;
        } 
        tmp = $("#HourType").val().trim();
        if (tmp.length =="") {
            $("#erHourType").css("display", "block");
            return false;
        } 
        tmp = $("#DateOfContribution").val().trim();
        if (tmp.length =="") {
            $("#erDateOfContribution").css("display", "block");
            return false;
        } 
        tmp = $("#NumberOfHours").val().trim();
        if (tmp.length =="") {
            $("#erNumberOfHours").css("display", "block");
            return false;
        } 
        
    });

</script>